<template>
    <div class="qx-container p-all-10">
        <tabs :target-list="targetList"></tabs>  
		<user-management 
			v-if="tabCurrentIndex == 1" 
			:admin-list="adminList" 
			:rule-map="ruleMap" 
			:page="page"
			@handleAdminPage="handleAdminPage"
			:log-page-total="logPageTotal"
			@editUser = "editUser"
			@searchAdmin="searchAdmin"
			>
			</user-management>
        <role-management 
			v-if="tabCurrentIndex == 2" 
			:rule-list="ruleList" 
			:menu-list="menuList" 
			@addUserInfo="addUserInfo" 
			@refresh="refresh" 
			:role-page="rolePage"
			:role-page-size="rolePageSize"
			:role-total="roleTotal"
			@handleRolePage="handleRolePage"
			@toAdminEditer="toAdminEditer">
		</role-management>
        <update-password v-if="tabCurrentIndex == 3" ></update-password>
		<new-role v-if="tabCurrentIndex == 4" :role-id="roleId" @refresh="refresh" :target-menu-list="targetMenuList" :role-parent-name="roleName"></new-role>
		
    </div>
</template>
<script>
    import tabs from '@/components/tabs/tabs.vue'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import userManagement from './components/userManagement.vue'
    import roleManagement from './components/roleManagement.vue'
	import updatePassword from './components/updatePassword.vue'
	import newRole from './components/new-role.vue'
	import { secondDirectory, tabList } from '@/utils/config.js'
    import {
		memuList,
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'
	import {
			getToken
	} from '@/utils/auth'

    export default {
        data() {
            return {
                adminList: [], 		// 用户列表数据
                ruleList: [], 		// 角色数据
                menuList: [], 		// 菜单列表
                currentPage: 0, 	// 页码
                ruleMap: {}, 		// 对于角色
				targetList: {},
				roleId: '' ,			// 角色id
				roleName: '',
				filter:'',
				page: 0,
				logPageTotal: 0,
				targetMenuList:[],
				rolePage:0,
				rolePageSize: 10,
				roleTotal: 0
            }
        },

        mounted() {
            this._initAdminList()
            this._initRole()
			console.log('权限')
			console.log(secondDirectory)
			let val = secondDirectory['permission'].list
			!val[0].show && val[1].show ? this.setTabCurrentIndex(2): !val[1].show && val[2].show ? this.setTabCurrentIndex(3) :''
        },
        methods: {
			handleRolePage(page) {
				this.rolePage = page
				this._initRole()
			},
			handleAdminPage(page) {
				this.page = page
				this._initAdminList()
			},
			searchAdmin(num, value,fil) {
				this.filter = fil
				this.page = 0
				let val = num == 2 ? '' : value
				this.filter = num == 2 ? '' :fil
				this._initAdminList(val)
			},
			refresh() {
				this._initRole()
			},
			addUserInfo(id = '') {
				this.roleId = ''
				
				let list = this.tabList
				list.forEach((item, index) => {
					if(item.title == '新增角色' || item.title == '修改角色') {
						list.splice(index,1)
						
					}
				})
				this.setTabList(list)
				this.targetList = {name: '4', title: '新增角色'},
				this.targetMenuList = []
			},
			toAdminEditer(id, item) {
				this.roleId = id
				let attr = []
				console.log(item)
				item.menuList.forEach(item => {
					attr.push(item.childMenu)
				})
				let list = this.tabList
				list.forEach((item, index) => {
					if(item.title == '新增角色' || item.title == '修改角色') {
						list.splice(index,1)
						
					}
				})
				console.log(attr)
				attr.forEach((item) => {
					console.log(item[0])
					memuList.forEach((cel) => {
						cel.childMenu.forEach((ce) => {
							if(ce.engName == item[0].name) {
								console.log(888)
								ce.select = true
							}
						})
					})
				})
				console.log(memuList)
				memuList.forEach((cel) => {
					if(cel.childMenu.filter((item) => {return item.select}).length == cel.childMenu.length){
						cel.num = 1
						cel.select = true
					}
				})
				this.roleName = item.roleName	
				this.targetMenuList = memuList
				this.targetList = {name: '4', title: '修改角色'}
			},
			editUser() {
				this._initAdminList()
			},
            // 获取用户列表
            _initAdminList(value = '') {
                this.$ajax({
                    api: 'admin/list',
                    params: {
						pageSize: 10,
						keyword: value,
						filter: this.filter,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : '',
                        page: this.page
                    }
                }).then(res => {
                    console.log(res)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.adminList = res.data.usersList
						this.page = res.data.page.page
						this.logPageTotal = res.data.page.total
						
                    }
                })
            },
            // 获取用户角色
            _initRole() {
                this.$ajax({
                    api: 'admin/role/list',
					params: {
						pageSize: 10,
						page: this.rolePage,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : '',
					}
                }).then(res => {
                    console.log(res)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.ruleList = res.data.roleList
						this.rolePage = res.data.page.page
						this.roleTotal = res.data.page.total
//                         let rule = {}
//                         for (var i = 0; i < this.ruleList.length; i++) {
//                             rule[this.ruleList[i].id] = this.ruleList[i].roleName;
//                         }
                        this.ruleMap = this.ruleList
                    }
                })

            },
            
            ...mapMutations({
                setTabList: 'SET_TAB_LIST',
                setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
            }),
        },
        computed: {
            ...mapGetters([
				'tabList',
                'tabCurrentIndex'
            ])
        },
        components: {
            tabs,
			newRole,
            userManagement,
            roleManagement,
			updatePassword
        }

    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .qx-container {
        display: flex;
        flex: 1;
        box-sizing: border-box;
        flex-direction: column;
    }
</style>
